<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 200px;
				height: 200px;
				/* display: inline; */
				/* display: inline-block; */
			}
			.box1 {
					background-color: pink;
			}
			.box2 {
				background-color: orange;
			}
			 
			span {
				width: 200px;
				height: 200px;
				/* display: block; */
				/* display: inline-block; */
			}
			
			img {
				width: 100px;
				height: 100px;
				/* display: block; */
			}
			
		</style>
	</head>
	<body>
		 <!-- 块级: 独占一行；宽高属性生效；默认宽度是父级的100%
		 
		 行级: 一行共存多个；宽高属性不生效；宽高有内容撑开
		 
		 行内块: 一行共存多个；宽高属性生效； 宽高默认有内容撑开
		 display于CSS中更改显示模式 -->
		 
		 <!-- div块级 -->
		 <div class="box1">div 盒子一</div>
		 <div class="box2">div 盒子二</div>
		 
		 <!-- span行级 -->
		 <span class="box1">span行一hhhhhhhhh</span>
		 <span>span行二</span>
		 
		 <!-- 行块 -->
		 <img src="./1.png" alt="" />
		 <img src="./1.png" alt="" />
	</body>
</html>